<template>
  <div>
    <div class="wrapper" v-if="point_item">
      <!-- 项目表格 -->
      <div class="table">
        <div class="table_header">
          <div class="steel_standard">规格</div>
          <div class="steel_num">捆数</div>
          <div class="steel_abnormal">异常</div>
          <div class="steel_weight">理计/吨</div>
        </div>
        <div class="table_data" v-for="(item,index) of excel_data" :key="index">
          <div class="steel_standard">{{item.brand}}{{item.format}}</div>
          <div class="steel_num">{{item.bundle_num}}</div>
          <div class="steel_abnormal">{{item.result_abnormal}}</div>
          <div class="steel_weight">{{item.result_weight}}</div>
        </div>
        <div class="table_header">
          <div class="steel_standard">整车合计</div>
          <div class="steel_num">{{point_item.total_bundle_num}}</div>
          <div class="steel_abnormal">{{point_item.total_abnormal}}</div>
          <div class="steel_weight">{{point_item.total_weight}}</div>
        </div>
      </div>

    <!-- 点条详情 -->
    <div class="tit">钢筋详情</div>
    <div class="detail">
      <!-- <img src="../../static/images/icon/arrowR.png" alt="" v-if="point_imgs.length>3" class="opener"> -->
      <swiper class="nav-view" display-multiple-items="3" @animationfinish="getSwiperItem" duration="300">
          <swiper-item class="nav-view-content"></swiper-item>
            <swiper-item class="nav-view-content" v-for="(item,index) in point_imgs" :key="index" >
            <div class="img-wrapper">
                <img :src="item.result_img_url"  mode="aspectFit" @click="prevImg(item.result_img_url)">
            </div>
            </swiper-item>
            <swiper-item class="nav-view-content"></swiper-item>
      </swiper>
      <div class="swiper-sign">
        <img src="../../static/images/icon/statistics_arrowD.png" alt="">
      </div>
    </div>


    <div class="detail-content-more" v-show="moreDetailItem">
        <div class="detail-content-more-style">
            <!-- 品牌&规格 -->
            <div><span>{{moreDetailItem.brand}}</span><span>{{moreDetailItem.format}}</span></div>
            <!-- 品名 -->
            <div><span>{{moreDetailItem.brand_name}}</span></div>
            <!-- 材质 -->
            <div><span>{{moreDetailItem.material}}</span></div>
            <!-- 长度 -->
            <div><span>{{moreDetailItem.length}}</span></div>
            <div><span>{{moreDetailItem.bundle_num}}</span></div>
        </div>
        <div class="detail-content-more-result">
            <div class="detail-content-more-result-item">
                <div class="label">识别数量</div>
                <span>{{moreDetailItem.result_num}}</span>
            </div>
            <div class="detail-content-more-result-item">
                <div class="label">出厂支数</div>
                <span>{{moreDetailItem.factory_count}}</span>
            </div>
            <div class="detail-content-more-result-item">
                <div class="label">异常数量</div>
                <span>{{moreDetailItem.result_abnormal}}</span>
            </div>
            <div class="detail-content-more-result-item">
                <div class="label">理计/吨</div>
                <span>{{moreDetailItem.result_weight}}</span>
            </div>
            
        </div>
    </div>
    <!-- 点条详情  end-->

  </div>
  <div class="no_data" v-else>暂无数据</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      steel:'',
      project:"",
      point_item:"",
      point_imgs:"",
      excel_data:'',//表格数据
      item_id:"",
      project_id:'',//项目id
      is_pay:'',//支付状态
      amountPrice:'',//总金额
      showRuleFlag:'',//规则的显示
      moreDetailFlag:'',//显示点条更多详情
      moreDetailItem:'',//点条的详情
      moreDetailIndex:'',
      tagIndex:'',
      initRecordList:'',//原始的收货记录数据
      recordList:''//收货记录
    }
  },
  props:['item_id','project_id'],
  methods: {
      getSwiperItem(e){
          let index=e.target.current;
          this.moreDetailIndex=index;
          this.moreDetailItem=this.point_imgs[index]?this.point_imgs[index]:{}
      },
    prevImg(url){
      var arr=''
      if(typeof(url)=='string'){
        arr=[`${url}`]
      }else{
        arr=url
      }
      wx.previewImage({
        current:arr[0], // 当前显示图片的http链接
        urls: arr// 需要预览的图片http链接列表
      })
    },
    async getPointImgList(){
      const userToken=wx.getStorageSync('userToken')
      const res=await this.$request.postData('/ucenter/getPointItemImgList',{
        user_token:userToken,
        item_id:this.item_id,
      })
      this.initData()
      if(res.data.level=='success'){
         this.project    = res.data.data.project
         this.point_item = res.data.data.point_item
         this.point_imgs = res.data.data.point_imgs
         this.excel_data=res.data.data.excel_data;
         this.amountPrice=res.data.data.amount
         this.is_pay=res.data.data.is_pay

         const record=res.data.data.receives;//收货记录
         this.recordList=record;
        this.initRecordList=record;
         this.moreDetailItem=this.point_imgs[0]?this.point_imgs[0]:{};
      }
      wx.stopPullDownRefresh()
    },
    showRule(){
      this.showRuleFlag=true
    },
    hideRule(){
      this.showRuleFlag=false
    },
    initData(){
      this.steel='';
      this.project="";
      this.point_item="";
      this.point_imgs="";
      this.item_id="";
      this.is_pay='';//支付状态
      this.amountPrice='';//总金额
      this.showRuleFlag='';//规则的显示
      this.moreDetailFlag='';//显示点条更多详情
      this.tagIndex='';
      this.initRecordList='';//原始的收货记录数据
      this.recordList=''//收货记录
    }
  },


}
</script>
<style lang="scss" scoped>
$base-color:#f28b00;
//项目头部
  .wrapper{
    width:100%;
    font-size: 16px;
    transform: translateZ(0);
  }
  .tit{
    font-weight: 600;
    margin:20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
      width: 30px;
      height: 30px;
    }
  }
  .detail{
      position: relative;
      .swiper-sign{
        display: flex;
        justify-content: center;
        img{
          width: 30px;
          height: 30px;
        }
      }
    }

  //统计
  .statement{
    margin-top:10px;
    border: 1px solid #eee;
    border-radius: 5px;
    display: flex;
    .statement-cell{
      display: flex;
      flex:1;
      text-align: center;
      justify-content: center;
      flex-wrap: wrap;
      align-content:space-between;
      &>div{
        width: 100%;
        margin:10px 0;
      }
    }
  }

  // 点条详情

  .nav-view{
      .nav-view-content{
        width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        .img-wrapper{
            img{
                width:100px;
                border-radius: 10px;
                height: 100px;
            }
        }
        .img-wrapper-active{
          border:2px solid $base-color;
          border-radius: 5px;
        }
        
        .icon-jiantou{
          transform: rotate(0deg)
        }
        .rotate-down{
          transform: rotate(180deg)
        }
        .content-name{
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 20px;
          font-size: 12px;
          text-align: center;
          color: #333333;
          &-more{
            display: flex;
            align-items: center;
          }
        }
      }
      
  }
  .detail-content-more{
        width:100%;
        margin:10px 0;
        font-size: 14px;
        .detail-content-more-style{
            display: flex;
            justify-content: space-around;
            &>div{
                display: flex;
            }
        }
        .detail-content-more-result{
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          
          .detail-content-more-result-item{
              width: 50%;
              display: flex;
              margin:10px 0;
              padding: 0 10px;
              box-sizing: border-box;
              .label{
                    border:1px #eee solid;
                    border-radius: 5px;
                    padding:2px 5px;
                }
                span{
                    font-weight: bold;
                    margin-left:30px;
                }
                &:first-child{
                    span{
                        color: #09bb07;
                    }
                }
          }
        }
      }

  //收货记录
  .record-content{
    width:auto !important;
    margin-right: 20px !important;
    padding:0 !important;
    &>div{
      border-radius: 5px !important;
      padding:5px 10px !important;
      color: #409eff !important;
      border: 1px solid #d9ecff !important;
      background-color: #ecf5ff !important;
    }
  }
  .record-content-active{
    &>div{
      background-color: #409eff!important;
      color: #fff !important;
    }
  }

  //收货记录的图片列
  .record-img{
    margin-top:20px;
    .record-item{
      border-bottom: 1px solid #eee;
      padding: 20px 0;
      &-tit{
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
          width:30px;
          height: 30px;
        }
        .label{
          border-radius: 5px;
          padding:2px 5px;
          background:#eee;
        }
      }
      &-desc{
      padding:2px 0;
      margin:10px 0;
    }
    &-img{
      display: flex;
      flex-wrap: wrap;
      img{
        margin:5px;
        width:30%;
        height: 100px;
        border-radius: 5px;
      }
    }
    }
  }

    //按钮
    .btn{
    margin-top:20px;
    padding:20px 0;
    display: flex; 
    position: fixed;
    bottom:0px;
    width: 100%;
    background: #fff;
    justify-content: space-between;
    .submit{
      color:#fff;
      background: red;
      border-radius: 5px;
      padding:5px 10px;
      margin-right: 20px;
    }
    .pay_tip{
      margin-left:20px;
      font-size: 20px;

    }
    .pay_price{
      color:red;
      font-size: 20px;
      margin-left: 20px;
    }
  }
  .rule_content{
    width:200px;
    height: 180px;
    padding:20px;
  }

  //动画
  .opener {
      width: 90rpx;
      height: 90rpx;
      margin-top:-45rpx; 
      transform: translateX(0px);
      position: absolute;
      z-index:999;
      top: 50%;
      right: 30rpx;
      opacity: 0.5;

      animation: opener .5s ease-in-out alternate infinite;
    }
    @-webkit-keyframes opener {
      100% {
        // right: 20rpx;
        transform: translateX(5px);
      }
    }
    .no_data{
      text-align: center;
      line-height: 60px;
      height: 60px;
    }

//项目表格
.table{
  margin-top:30px;
  box-sizing: border-box;
  width: 100%;
  border:1px solid #eee;
  & .steel_num{
    flex:0.3 !important;
  }
  &  .steel_abnormal{
    flex:0.7 !important;
  }
  &  .steel_weight{
    flex:0.7 !important;
  }
  .table_header,.table_data{
    display: flex;
    text-align: center;
  }
  .table_header{
    &>div{
      flex: 1;
      color: #000;
      font-weight: 600;
      padding:10px 0;
    }
    border-bottom: 1px solid #eee;
    &>div:not(:last-child){
      border-right:1px solid #eee;
    }
  }
  .table_data{
    font-size: 15px;
    &>div{
      padding:10px 0;
      flex: 1;
    }
    &>div:not(:last-child){
      border-right:1px solid #eee;
    }
  }
  .table_data:not(:last-child){
    border-bottom: 1px solid #eee;
  }
}
</style>

